<script setup lang="ts">
import { wxmobileLogin } from '@/services/api/auth';
import { useRequest } from 'alova';
import { useAuthStore } from '@/state/modules/auth';
import { omit } from 'lodash-es';
import { handleJump } from '@/utils/common';
import { Toast } from '@/utils/uniapi/prompt';
import { saveOpenid } from '@/services/api/auth';

const pageQuery = ref<Record<string, any> | undefined>(undefined);
onLoad((query) => {
    pageQuery.value = query;
    console.log(query);
});

const router = useRouter();
const authStore = useAuthStore();

const { send: sendMobileLogin } = useRequest(wxmobileLogin, { immediate: false });
const { send: saveOpenidSend } = useRequest(saveOpenid, { immediate: false });
const getPhoneNumber = (event) => {
    const code = event.detail.code;
    sendMobileLogin({ code: code }).then((res: any) => {
        Toast('登录成功', { duration: 1500 });
        const userinfo = res.userinfo;
        authStore.setToken(userinfo.token);
        if (userinfo.openid === '') {
            uni.login({
                provider: 'weixin',
                success: function (res) {
                    const params = {
                        code: res.code,
                    };
                    saveOpenidSend(params).then(() => {
                        authStore.getUserinfo();
                    });
                },
            });
        } else {
            authStore.getUserinfo();
        }
        setTimeout(() => {
            if (unref(pageQuery)?.redirect) {
                // 如果有存在redirect(重定向)参数，登录成功后直接跳转
                const params = omit(unref(pageQuery), ['redirect', 'tabBar']);
                if (unref(pageQuery)?.tabBar) {
                    // 这里replace方法无法跳转tabbar页面故改为replaceAll
                    router.replaceAll({ name: unref(pageQuery)?.redirect, params });
                } else {
                    router.replace({ name: unref(pageQuery)?.redirect, params });
                }
            } else {
                // 不存在则返回上一页
                router.back();
            }
        }, 1500);
    });
};
</script>

<template>
    <view class="container">
        <view class="bg">
            <image src="/static/images/logo.jpg" mode="widthFix" />
        </view>
        <view class="text">老刘泥锅涮串<br />一种源自传统又充满现代韵味的独特美食。</view>
        <view class="btn">
            <button class="login" @getphonenumber="getPhoneNumber" open-type="getPhoneNumber">点击授权</button>
            <view class="nologin" @click="handleJump('Home', {}, true)">暂不授权</view>
            <view></view>
        </view>
        <zero-privacy :onNeed="true"></zero-privacy>
    </view>
</template>

<style lang="scss" scoped>
.bg {
    padding-top: 20vh;
    text-align: center;
    image {
        width: 200rpx;
        border-radius: 50%;
    }
}
.btn {
    width: 500rpx;
    margin: 0 auto;
    margin-top: 220rpx;
}
.login {
    height: 80rpx;
    padding: 0;
    text-align: center;
    line-height: 80rpx;
    background-color: #191919;
    border-radius: 40rpx;
    font-size: 28rpx;
    color: #ffffff;
}
.text {
    margin-top: 100rpx;
    text-align: center;
    color: #9c9c9d;
    font-size: 32rpx;
}
.nologin {
    margin-top: 30rpx;
    text-align: center;
    color: #999;
    // font-size: 28rpx;
}
.ysxy {
    width: 750rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 50rpx;
    color: #9c9c9d;
    position: absolute;
    bottom: 80rpx;
    view {
        margin: 0 10rpx;
        color: #5a7cab;
    }
}
</style>
